<template>
  <div class="area-modal">
    <el-dialog width="30%" v-model="dialogVisible" :before-close="handleClose">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <div>比选方案</div>
        </div>
      </template>
      <div class="scheme-box">
        <div class="table-box">
          <el-table :data="state.tableData" highlight-current-row border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />

            <el-table-column prop="scName" label="方案名称" show-overflow-tooltip />
            <el-table-column prop="creatorName" label="创建人" show-overflow-tooltip />
            <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />

          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave"> 确定 </el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, defineExpose } from 'vue'
  import { renderTime } from '@/utils/index'
  //接口
import { getSchemeList} from '@/services/modules/compute-methods'
  onMounted(()=>{

  })
  const dialogVisible = ref(false)
  const addForm = reactive({})
  const state = reactive({
    zid:'',
    tableData:[]
  })
  const tableData = [
    {
      name:'北望023',
      user:'张三',
      date:'2022-10-1'
    },
       {
      name:'北望024',
      user:'李四',
     date:'2022-10-1'
    }
  ]
  //根据区域获取方案列表
  function schemeList() {
    return new Promise((resolve, reject) => {
    getSchemeList({ zid: state.zid }).then((res) => {
      if (res.code === 200) {
        state.tableData = res.data
        state.tableData = state.tableData.map((item) => {
          return (item = { ...item, createTime: renderTime(item.createTime) })
        })
        resolve(state.tableData)
      }
    })
    })

  }
  function handleOpenModal(value){
    dialogVisible.value = true
    state.zid = value
    schemeList()
  }
  defineExpose({handleOpenModal})
  function handleClose(){
    dialogVisible.value = false
  }
  function handleSelectionChange(){}
</script>

<style lang="less" scoped>
.area-modal {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
  .table-box {
    height: calc(100% - 50px);
    box-sizing: border-box;
    padding: 0px;
    :deep(.el-table) {
      height: 100%;
    }
  }
}
</style>
